<template>
	<view class="comment">
		<view class="click-area" @click="close">
		</view>
		<view class="comment-box">
			<scroll-view scroll-y="true" class="comment-list">
				<view class="comment-header">
					<view class="header-number">
						3144 条评论
					</view>
					<view class="icon-close iconfont icon-close" @click="close"></view>
				</view>
				<view class="nbsp"></view>
				<view class="comment-item" hover-class="item-hover">
					<image class="comment-img" src="../static/img/2-1.jpg"></image>
					<view class="comment-content">
						<view class="name">F</view>
						<view class="comment-content">那就享受当下吧111111111111111111111111111111</view>
						<view class="love-box">
							<view class="icon-love iconfont icon-aixin"></view>
							<view class="love-number">1</view>
						</view>
						<view class="data">12-8</view>
						<view class="reply">回复</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// const element = await page.$('.comment-item');
	// const tap = await element.tap();
	
	export default {
		name:"Comment",
		data() {
			return {
				
			};
		},
		methods: {
			close() {
				this.$emit('closecomment');
			}
		}
	}
</script>
	
<style lang="scss">
	.comment {
		color: #000000;
		width: 100%;
		height: 100%;
		.click-area {
			width: 100%;
			height: 40%;
			background-color: rgba(0,0,0,0);
		}
		.comment-box {
			position: absolute;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			background-color: #FFFFFF;
			width: 100%;
			height: 60%;
			.comment-list {
				height: 100%;
				width: 100%;
				position: relative;
				box-sizing: border-box;
				padding-bottom: 20px;
				.comment-header {
					width: 100%;
					height: 40px;
					line-height: 40px;
					text-align: center;
					position: absolute;
				}
				.icon-close {
					position: absolute;
					right: 20px;
					top: 0px;
				}
				.nbsp {
					height: 40px;
					width: 100%;
				}
				.comment-item {
					display: flex;
					margin-top: 20px;
					position: relative;
					box-sizing: border-box;
					padding: 0 20px;
					transition: all .1s;
					&.item-hover {
						background-color: #CCCCCC;
					}
					.comment-img {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						margin-right: 10px;
					}
					.comment-content {
						flex: 1;
						position: relative;
						.name {
							color: #808080;
							line-height: 20px;
						}
						.comment-content {
							width: 70%;
							line-height: 25px;
							word-wrap: break-word;
							word-break: break-all;
						}
						.love-box {
							position: absolute;
							top: 0;
							right: 0;
							height: 50px;
							text-align: center;
							.icon-love {
								font-size: 20px;
								color: #c0c0c0;
								line-height: 25px;
							}
							.love-number {
								color: #808080;
								line-height: 25px;
							}
						}
						.data,.reply {
							font-size: 14px;
							margin-top: 7px;
							color: #808080;
							margin-right: 20px;
							display: inline-block;
						}
					}
				}
			}
		}
	}
</style>
